<template>
  <div
    class="dia"
    v-if="visibleDia"
    :style="{ width, height, background: 'rgba(0,0,0,0.2)' }"
  >
    <!-- 头部 -->
    <div class="head">
      <h3>{{ title }}</h3>
      <i @click="cancel">✖️</i>
    </div>

    <!-- 内容 -->
    <div>===== <slot></slot></div>
    <!-- 底部 -->
    <div class="foot">
      <el-button @click="cancel">取消</el-button>
      <el-button>确定</el-button>
    </div>
  </div>
</template>
           
<script>
/* 
属性
属性            说明            类型   默认值
width         设置对话框的宽度    String   100px
background    设置背景颜色       String    pink
height        设置高度          String    100px
visibleDia    设置对话框显示和影藏  String  false
title         设置对话框的标题     String  我是title 
事件
close      关闭对话框就触发

 */
export default {
  name: '',
  props: {
    width: {
      type: String,
      default: '100px',
    },
    background: {
      type: String,
      default: 'pink',
    },
    height: {
      type: String,
      default: '100px',
    },
    visibleDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '我是title',
    },
  },
  data() {
    return {}
  },
  created() {},
  computed: {},
  methods: {
    cancel() {
      //  this.visibleDia = false

      this.$emit('close')
      this.$emit('update:visibleDia', false)
    },
  },
}
</script>
<style lang='less'  scoped>
.dia {
  padding: 20px;
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid red;
  }

  .foot {
    position: absolute;
    bottom: 20px;
    right: 30px;
  }
}
</style>




